<template>
	<div>
		<div id="goodsdetail-box">
			<el-row>
			  <el-col :span="12"><img :src="goods.product.pic" alt=""></el-col>
			  <el-col :span="2"></el-col>
			  <el-col :span="10">
				  <h2 id="goodsname">{{goods.product.name}}</h2>
				  <div class="goodsmess">{{goods.product.price}}</div>
				  <div class="goodsmess">{{locationCity}}</div>
				  <button @click="add()">加入购物车</button>
			  </el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import BMap from 'BMap'
	import shopheader from '../components/shopheader.vue'
	export default {
	  data () {
		  return {
			  gid:this.$route.query.gid,
			  locationCity:'加载中',
			  goods:[]
		  }
	  },
	  components:{
	  	'shopheader':shopheader
	  },
	  methods:{
		  goclassify(index) {
			  this.$router.push('/classifysearch')
		  },
		  add() {
			  this.$axios({
			      method:"post",
			      url:"http://10.11.20.25:8201/mall-portal/cart/add",
			      data:{
			          ids:1
			      }
			  }).then((res)=>{
			      console.log(res.data);
			  })
		  },
		  dz() {
				var that=this
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function getinfo(position) {
					let city = position.address.city; //获取城市信息       
					let province = position.address.province;
					//console.log(that.locationCity)
					that.locationCity=city		//将城市名称保存到locationCity中
					//that.$store.commit('hqwz',city)
				}, function(e) {        
					that.locationCity='定位失败'
				}, {
					provider: 'baidu',
				});
				}
	  },
	  mounted() {
		  this.dz()
		  var that = this;
		  this.axios.get('http://10.11.20.25:8201/mall-portal/product/detail/'+that.gid)
		  .then(function (response) {
		    //console.log(response);
		    that.goods = response.data.data
		  })
		  .catch(function (error) {
		    console.log(error.response);
		  });
	  }
	}
</script>

<style>
	#goodsdetail-box {
		width: 80%;
		margin: auto;
	}
	#goodsdetail-box img {
		margin: 5% 15%;
		width: 100%;
		max-width: 500px;
		max-height: 500px;
		border:  1px solid #82848A;
	}
	#goodsdetail-box h2 {
		margin-top: 60px;
		color: #606266;
	}
	#goodsdetail-box .goodsmess {
		color: #82848A;
		padding-top: 20px;
		padding-left: 10px;
		font-size: 20px;
	}
	#goodsdetail-box button {
		background-color: brown;
		color: azure;
		width: 200px;
		height: 60px;
		font-size: 30px;
		box-shadow: 1px 1px #606266;
		margin-top: 150px;
	}
</style>
